<template>
    <div>
        <el-row>
            <el-col :span="8" :offset="8">
                <el-card style="height: 500px;">
                    <p>订单号:&nbsp;&nbsp;{{ myOrder.code }}</p>
                    <p>下单时间:&nbsp;&nbsp;{{ myOrder.createTime }}</p>
                    <el-table :data="orderDetailList">
                        <el-table-column label="图片" prop="drugName">
                            <template slot-scope="{ row }">
                                <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
                                    :src="getImage(row.image)"
                                    :preview-src-list="[`http://localhost:8081/common/download?name=${row.image}`]">
                                    <div slot="error" class="image-slot">
                                        <img src="" style="width: auto; height: 40px; border:none;">
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="药物名称" prop="drugName">
                        </el-table-column>
                        <el-table-column label="数量" prop="count">
                        </el-table-column>
                        <el-table-column label="单价" prop="singlePrice">
                        </el-table-column>
                    </el-table>
                    <p style="margin: 20px 0px 0px 350px;">合计：&nbsp;&nbsp;<b>{{ myOrder.payPrice }}￥</b></p>
                    <div style="text-align: center;"><el-button type="primary"  @click="toPay">立即支付</el-button></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            myOrder: {},
            orderDetailList: [],
            code: ''
        }
    },
    mounted() {
        this.code = this.$route.params.code
        this.getOrderDetail()
    },
    methods: {
        getImage(image) {
            //图片回显
            return "http://localhost:8081/common/download?name=" + image
        },
        toPay() {
            //支付按钮函数 根据订单号进行支付
            this.request.get("/order/final", {
                params: {
                    orderId: this.code
                }
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success("支付成功")
                    this.$router.push("/front/my/order")
                }
            })
        },
        getOrderDetail(code) {
            //获取订单详情数据 根据订单号
            this.request.get("/order/getOrderDetail/" + this.code).then(res => {
                if (res.code == 200) {
                    this.myOrder = res.data
                    this.orderDetailList = this.myOrder.orderDetailDTOList
                    console.log("详情界面==>", res.data)
                }
            })
        }
    }
}
</script>

<style lang="sass" scoped>

</style>